<template>
  <div>
    <a-tabs v-model:active-key="type" @tab-click="clear">
      <a-tab-pane :key="DeviceTypeEnum.GROUP" :title="t['请选择分组']">
        <device-group v-model="objects"></device-group>
      </a-tab-pane>
      <a-tab-pane :key="DeviceTypeEnum.CUSTOM" :title="t['请选择设备']">
        <device-selector v-model="objects"></device-selector>
      </a-tab-pane>
      <a-tab-pane :key="DeviceTypeEnum.ALL" :title="t['全部设备']">
        <div class="text-center">{{ t["已选择全部设备"] }}</div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { DeviceTypeEnum } from "@/enum/system.enum";

const type = defineModel<DeviceTypeEnum>("type");
const t = translate("公共模块");
const objects = defineModel<string[]>("objects");
const clear = () => {
  objects.value = [];
};
</script>

<style lang="scss" scoped></style>
